﻿@model FSharpMvc.Models.UserData[]

@{
    ViewBag.Title = "Recommendations";
}

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript" src="~/Scripts/knockout-2.1.0.js"></script>
<script type="text/javascript" src="~/Scripts/Utils.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var UserViewModel = function (user) {
            var self = this;
            self.Id = user.Id;
            self.UserName = user.UserName;
            self.Checked = ko.observable(false);
        }

        var users = [
        @foreach(var user in Model) {
            <text>new UserViewModel(</text> @Html.Raw(Json.Encode(user)); @:),
           }
        ];


        var MovieNightModel = function (users) {
            var self = this;

            self.Users = ko.observableArray(users)
            self.RecommendationsForGenre = ko.observableArray([])
            self.RecommendMovies = function () {

                var selectedUsers = $.grep(self.Users(), function(u) {return u.Checked(); });

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("RecommendMovies")',
                    data: JSON.stringify({ participants: selectedUsers }),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    traditional: true,
                    success: function (response) {
                        self.RecommendationsForGenre.removeAll()
                        for (var k in response) {
                            self.RecommendationsForGenre.push(response[k]);
                        }
                        $('#Results').show();
                    }
                    });
                };            
        };

        var viewModel = new MovieNightModel(users);
        ko.applyBindings(viewModel);
    });
</script>

<h2>Host a movie night.</h2>

<h3>Who's attending?</h3>
<div>
    <div style="padding-left:2em">
        <table>
            <tbody data-bind="foreach: Users">
                <tr>
                    <td>
                        <input type="checkbox" data-bind="checked: Checked" />
                        <span data-bind="text: UserName" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p style="padding-bottom: 5px"></p>
    <input type="button" value="Find a movie!" data-bind="click : RecommendMovies"/>
</div>

<h2 id="Results" style="padding-top: 10px; font-style:italic; display:none" >Suggestions</h2>

<div data-bind="foreach: RecommendationsForGenre">
    <div>
    <h3 data-bind="text:Genre" style="clear:both"></h3>
        <ul data-bind="foreach: Recommendations" style="list-style-type:none">
            <li style="float:left; width:200px; height:250px;padding:10px">
                <a data-bind="attr: {href: $data.Movie.NetflixUrl}" target="_blank"><img data-bind="attr: {src: $data.Movie.LargeUrl, title: $data.Movie.Synopsis}" /></a>
                <div style="padding:4px; font-weight:bold" data-bind="text: $data.Movie.Title"></div>
                <div style="padding:4px">Avg Rating:<span data-bind="text: Rating"></span> stars</div>
            </li>
        </ul>
    </div>
</div>
